<script setup>
import { onMounted, ref,onUnmounted,onBeforeMount, watch } from 'vue'
import MenuIndex from '@/views/SideMenu/MenuIndex.vue';
import AMapLoader from "@amap/amap-jsapi-loader";
import { key } from '@/assets/js/GlobalValue.js'
import { useAdminStore } from '@/stores/AdminStore';
import router from '@/router';

const bodyCss = ref({ width: '', height: '' })
let map = null;
const userToken = ref()
const admin = ref()
const daysWeather = ref();
const todayWeather = ref();
const adminStore = useAdminStore()

onMounted(() => {
  bodyCss.value.width = window.innerWidth + 'px'
  bodyCss.value.height = window.innerHeight + 'px'
  userToken.value = adminStore.getTokenInfo()
  admin.value = adminStore.getAdminInfo()
  getWeather()
});


// 添加事件监听器以在窗口大小变化时更新宽度和高度
window.addEventListener('resize', () => {
  bodyCss.value.width = window.innerWidth + 'px'
  bodyCss.value.height = window.innerHeight + 'px'
});

onUnmounted(() => {
  window.removeEventListener('resize', () => {
   bodyCss.value.width = window.innerWidth + 'px'
    bodyCss.value.height = window.innerHeight + 'px'
  });
});


const getWeather = () => {
    AMapLoader.load({
      key: key, // 申请好的Web端开发者Key，首次调用 load 时必填
      version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
      plugins: ['AMap.Weather'], //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
    })
    .then((AMap) => {
        map = new AMap.Weather();
        map.getLive("广州市", (error,res) => {
            todayWeather.value = res;
        })
        map.getForecast("广州市", (error,res) => {
            daysWeather.value = res;
        })
    })
    .catch((e) => {
        console.log(e);
    });
}

const uploadSuccess = (res) => {
  if (res.code === 200) { 
    userAvatar.value = res.imgUrl
  } else {
    ElMessage.error(res.msg)
  }
}
// 注销
const logout = () => {
  adminStore.reset()
  router.push('/login')
}

</script>
<template>
<el-container :style="bodyCss" class="el-container">
  <el-header class="el-header">
    <el-upload
      ref="uploadFile"
      auto-upload="true"
      action="http://localhost:6060/admin/avatarUpload"
      :show-file-list=false
      crossorigin="anonymous"
      accept="image"
      :on-success="uploadSuccess"
      :headers="{'token':userToken}"
    >
      <el-avatar
      class="head"
        :src="admin?.avatarUrl"
      />
    </el-upload>
    <div class="adminInfo">
      <div class="adminName">
        {{ admin?.adminName }}
      </div>
      <el-link type="danger" class="logout" @click="logout">注销</el-link>
    </div>
    <div class="countdown">
      个性化换装推荐系统后台
    </div>
    <el-card class="weather-card" shadow="never">
      {{ todayWeather?.city }}
      {{ todayWeather?.weather }}
      {{ todayWeather?.temperature }}℃
      {{ todayWeather?.windDirection }} {{ todayWeather?.windPower }}级
    </el-card>
  </el-header>
    <el-container>
      <MenuIndex class="menu"></MenuIndex>
  </el-container>
</el-container>
</template>
<style scoped>
.el-container {
  color: aliceblue;
}
.menu {
  width: 100%;
  height: 100%;
}
.el-header {
  box-shadow: 0px 0px 3px 2px #e7e9ee; /* 添加阴影扩散 */
  width: 100%;
  height: 10%;
  position:relative;
}
.head {
  position: absolute;
  left: 1%;
  top: 50%;
  transform: translate(0, -50%);
}

.adminInfo {
  color: #1D1D1D;
  font-size: large;
  font-weight: bold;
  position: absolute;
  left: 4%;
  top: 50%;
  transform: translate(0, -50%);
}

.logout {
  font-size: medium;
  font-weight: bold;

}



.weather-card {
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translate(0, -50%);
  border: 0px;
}
.countdown {
  font-weight: bolder;
  color: black;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-25%, -75%);
}
</style>
